<template>
  <div class="container">
    <div id="particles"></div>
    <div class="login-container">
      <div class="login-form">
        <h1 class="title text-center">注册</h1>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="passagen">
            <el-input type="password" v-model="form.passagen" placeholder="确认密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" size="large" @click="onSubmit">注册</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" style="float: right" @click="goLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import Api from "../api/index";
  export default {
    data() {
      let validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.form.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        form: {
          name: "",
          password: "",
          passagen: ""
        },
        rules: {
          name: [
            { required: true, message: "请输入账号", trigger: "blur" },
            { min: 4, max: 12, message: "长度在 4 到 12 个字符", trigger: "blur" }
          ],
          password: [{ required: true, message: "请输入密码", trigger: "blur" }],
          passagen: [{ validator: validatePass, trigger: "blur" }]
        }
      };
    },
    transition(to, from) {
      console.log(to)
      if (!from) return "slide-left";
      return +to.query.page < +from.query.page ? "slide-right" : "slide-left";
    },
    methods: {
      creatPatticle() {
        particlesJS("particles", {
          particles: {
            number: {
              value: 100,
              density: {
                enable: true,
                value_area: 1000
              }
            },
            color: {
              value: "#bebebe"
            },
            shape: {
              type: "circle",
              stroke: {
                width: 0,
                color: "#ffffff"
              },
              polygon: {
                nb_sides: 5
              },
              image: {
                src: "img/github.svg",
                width: 100,
                height: 100
              }
            },
            opacity: {
              value: 0.3
            },
            size: {
              value: 15,
              random: true,
              anim: {
                enable: false,
                speed: 40,
                size_min: 0.1,
                sync: false
              }
            },
            line_linked: {
              enable: true,
              distance: 300,
              color: "#c5c5c5",
              opacity: 0.4,
              width: 1
            },
            move: {
              enable: true,
              speed: 0.5,
              direction: "none",
              random: true,
              straight: false,
              out_mode: "out",
              bounce: false,
              attract: {
                enable: false,
                rotateX: 600,
                rotateY: 1200
              }
            }
          },
          interactivity: {
            detect_on: "canvas",
            events: {
              onhover: {
                enable: false,
                mode: "repulse"
              },
              onclick: {
                enable: false,
                mode: "push"
              },
              resize: true
            },
            modes: {
              grab: {
                distance: 400,
                line_linked: {
                  opacity: 1
                }
              },
              bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 0.8471528471528471,
                speed: 3
              },
              repulse: {
                distance: 200,
                duration: 0.4
              },
              push: {
                particles_nb: 4
              },
              remove: {
                particles_nb: 2
              }
            }
          },
          retina_detect: false
        });
      },
      goLogin() {
        this.$router.push({ path: "/login" });
      },
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            Api.resgister(this.form).then(res=>{
              if(!res.code){
                this.$router.push({path:"/login"})
              }
            });
          }
        });
      }
    },
    mounted() {
      this.creatPatticle();
    },
    head: {
      title: "注册"
    }
  };
</script>
<style lang="scss" scoped>
  .text-center {
    text-align: center;
  }

  .container {
    height: 100vh;
    position: relative;
    overflow: hidden;
    #particles {
      height: 100vh;
    }
    .login-container {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      .login-form {
        position: absolute;
        width: 340px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .title {
          color: #9c9c9c;
          margin-bottom: 1em;
        }
      }
    }
  }
</style>

